<template>
  <div class="container">
    <a-row :gutter="16">
      <!-- 中间 -->
      <a-col :span="20">
        <a-space :size="16" style="width: 100%" direction="vertical">
          <!-- 实时数据 -->
          <div class="real-time">
            <div class="time-left">
              <img src="../../assets/real-time.png" alt="" />
              <p>实时数据</p>
            </div>
            <p>更新时间：{{ getDateTime() }}</p>
          </div>
          <!-- 交易额 -->
          <div class="index-card">
            <div class="card-one">
              <p class="card-title">GMV交易额</p>
              <p class="card-number">{{ dailyData.gmvDataDto.money }}</p>
              <p class="growth-pro">
                周同比 <span>{{ dailyData.gmvDataDto.week }}%</span
                ><img src="../../assets/go-up.png" alt="" />日环比
                <span>{{ dailyData.gmvDataDto.daily }}%</span
                ><img src="../../assets/down.png" alt="" />
              </p>
              <p class="per-customer">
                客单价 <span>￥{{ dailyData.gmvDataDto.averagePrice }}</span>
              </p>
            </div>
            <div class="card-one">
              <p class="card-title">VOL交易数</p>
              <p class="card-number">{{ dailyData.volDataDto.num }}</p>
              <!-- <echartsBar
                class="chart"
                height="height:26px"
                ref="transactionRef"
              ></echartsBar> -->
              <img src="../../assets/line-chart1.png" alt="" />
              <p class="growth-pro growth-pro-border">
                周同比 <span>{{ dailyData.volDataDto.week }}%</span
                ><img src="../../assets/go-up.png" alt="" />日环比
                <span>{{ dailyData.volDataDto.daily }}%</span
                ><img src="../../assets/down.png" alt="" />
              </p>
            </div>
            <div class="card-one">
              <p class="card-title">UV访客数</p>
              <p class="card-number">{{ dailyData.uvDataDto.num }}</p>
              <p class="growth-pro">
                周同比 <span>{{ dailyData.uvDataDto.week }}%</span
                ><img src="../../assets/go-up.png" alt="" />日环比
                <span>{{ dailyData.uvDataDto.daily }}%</span
                ><img src="../../assets/down.png" alt="" />
              </p>
              <p class="per-customer">
                转化率{{ dailyData.uvDataDto.conversionRate }}%
              </p>
            </div>
            <div class="card-one">
              <p class="card-title">DNU新增用户</p>
              <p class="card-number">{{ dailyData.dnuDataDto.num }}</p>
              <img src="../../assets/line-chart3.png" alt="" />
              <p class="growth-pro growth-pro-border">
                周同比 <span>{{ dailyData.dnuDataDto.week }}%</span
                ><img src="../../assets/go-up.png" alt="" />日环比
                <span>{{ dailyData.dnuDataDto.daily }}%</span
                ><img src="../../assets/down.png" alt="" />
              </p>
            </div>
            <div class="card-one">
              <p class="card-title">SHR分享数</p>
              <p class="card-number">{{ dailyData.shrDataDto.shareNum }}</p>
              <img src="../../assets/line-chart2.png" alt="" />
              <p class="growth-pro growth-pro-border">
                周同比 <span>{{ dailyData.shrDataDto.week }}%</span
                ><img src="../../assets/go-up.png" alt="" />日环比
                <span>{{ dailyData.shrDataDto.daily }}%</span
                ><img src="../../assets/down.png" alt="" />
              </p>
            </div>
          </div>
          <!-- 交易走势 -->
          <div class="transaction">
            <div class="tran-header">
              <div>
                <p
                  :class="transactionNum === '1' ? 'change-tran' : ''"
                  @click="bindTran('1')"
                >
                  交易走势
                </p>
                <p
                  :class="transactionNum === '2' ? 'change-tran' : ''"
                  @click="bindTran('2')"
                >
                  访客走势
                </p>
              </div>
              <p>仅展示30天数据走势</p>
            </div>
            <echartsBar
              class="chart"
              height="height:278px"
              ref="transactionRef"
            ></echartsBar>
          </div>
          <!-- 交易类目数据 -->
          <div class="tran-category">
            <div class="sale-item">
              <div class="sale-header">
                <div class="sale-title">
                  <img src="../../assets/category.png" alt="" />
                  <p>交易类目数据</p>
                </div>
                <a-date-picker
                  v-model:value="dealDate"
                  :disabledDate="disabledDate"
                  picker="month"
                  @change="handleChangeDeal"
                />
              </div>
              <echartsBar
                class="chart"
                height="height:300px"
                ref="categoryRef"
              ></echartsBar>
            </div>
            <div class="sale-item">
              <div class="sale-header">
                <div class="sale-title">
                  <img src="../../assets/category.png" alt="" />
                  <p>售后数据</p>
                </div>
                <a-date-picker v-model:value="value3" picker="month" />
              </div>
              <div class="tran-category-body">
                <div class="category-middle">
                  <div>
                    <p>退货退款</p>
                    <p>8846 <span>总占比</span><span>3%</span></p>
                  </div>
                  <div>
                    <p>退货退款</p>
                    <p>8846 <span>总占比</span><span>3%</span></p>
                  </div>
                </div>
                <div class="category-table">
                  <a-table
                    :columns="serviceColumns"
                    :data-source="serviceData"
                    :pagination="false"
                  >
                    <template #bodyCell="{ column, record }">
                      <template v-if="column.key === 'key'">
                        <p class="table-key">{{ record.key }}</p>
                      </template>
                    </template>
                  </a-table>
                </div>
              </div>
            </div>
          </div>
          <!-- 新增用户数据 -->
          <div class="after-sale">
            <div class="sale-item">
              <div class="sale-header">
                <div class="sale-title">
                  <img src="../../assets/category.png" alt="" />
                  <p>新增用户数据</p>
                </div>
                <a-date-picker
                  v-model:value="userPicker"
                  :disabledDate="disabledDate"
                  picker="month"
                  @change="handleChangeUserDate"
                />
              </div>
              <div class="sale-body">
                <div>
                  <p class="card-title">客户用户</p>
                  <p class="card-number">{{ userCount.userData.num }}</p>
                  <p class="growth-pro">
                    月同比
                    <span>{{ userCount.userData.monthsOfYearOnYear }}%</span
                    ><img src="../../assets/go-up.png" alt="" />月环比
                    <span>{{ userCount.userData.lastMonth }}%</span
                    ><img src="../../assets/down.png" alt="" />
                  </p>
                </div>
                <div>
                  <p class="card-title">商家用户</p>
                  <p class="card-number">{{ userCount.shopUserData.num }}</p>
                  <p class="growth-pro">
                    月同比
                    <span>{{ userCount.shopUserData.monthsOfYearOnYear }}%</span
                    ><img src="../../assets/go-up.png" alt="" />月环比
                    <span>{{ userCount.shopUserData.lastMonth }}%</span
                    ><img src="../../assets/down.png" alt="" />
                  </p>
                </div>
              </div>
            </div>
            <div class="sale-item">
              <div class="sale-header">
                <div class="sale-title">
                  <img src="../../assets/category.png" alt="" />
                  <p>会员数据</p>
                </div>
                <a-date-picker
                  v-model:value="vipPicker"
                  :disabledDate="disabledDate"
                  picker="month"
                  @change="handleChangeVipDate"
                />
              </div>
              <div class="sale-body">
                <div>
                  <p class="card-title">本月新增会员数</p>
                  <p class="card-number">{{ vipData.num }}</p>
                  <p class="growth-pro">
                    月同比 <span>{{ vipData.monthsOfYearOnYear }}%</span
                    ><img src="../../assets/go-up.png" alt="" />月环比
                    <span>{{ vipData.lastMonth }}%</span
                    ><img src="../../assets/down.png" alt="" />
                  </p>
                </div>
                <div>
                  <p class="card-title">总用户会员占比</p>
                  <p class="card-number">{{ vipData.percentage }}%</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 热销商品 -->
          <div class="hot-product">
            <div class="hot-header">
              <div class="sale-title">
                <img src="../../assets/hot-shop.png" alt="" />
                <p>热销商品</p>
              </div>
              <a-date-picker
                v-model:value="hotPicker"
                :disabled-date="disabledDate"
                picker="month"
                @change="onHotPickerChange"
              />
            </div>
            <div class="hot-body">
              <a-table
                :columns="hotProductColumns"
                :data-source="hotSalesInfo"
                :pagination="hotProductPagination"
              >
                <template #bodyCell="{ column, index, record }">
                  <template v-if="column.key === 'index'">
                    <p class="table-key">{{ index + 1 }}</p>
                  </template>
                  <template v-if="column.key === 'rate'">
                    {{ (record.rate * 100).toFixed(2) + "%" }}
                  </template>
                </template>
              </a-table>
            </div>
          </div>
        </a-space>
      </a-col>
      <!-- 右边 -->
      <a-col :span="4">
        <a-space :size="16" style="width: 100%" direction="vertical">
          <div class="commission">
            <div class="right-title">
              <img src="../../assets/commission.png" alt="" />
              <p>待办事件</p>
            </div>
            <div class="commission-body">
              <div>
                <p>65</p>
                <p>待鉴定</p>
              </div>
              <div>
                <p>65</p>
                <p>平台待发货</p>
              </div>
              <div>
                <p>65</p>
                <p>申请新品</p>
              </div>
              <div>
                <p>65</p>
                <p>提现申请</p>
              </div>
            </div>
          </div>
          <div class="hot-brand">
            <div class="right-title">
              <img src="../../assets/hot-brand.png" alt="" />
              <p>热销品牌</p>
            </div>
            <div class="brand-body">
              <a-table
                :columns="hotBrandColumns"
                :data-source="hotBrandData"
                :pagination="false"
              >
                <template #bodyCell="{ column, record, index }">
                  <template v-if="column.key === 'name'">
                    <div class="brand-name">
                      <img src="../../assets/radio-not-checked.png" alt="" />
                      <a-popover>
                        <template #content>
                          <p>{{ record.name }}</p>
                        </template>
                        <p>{{ record.name }}</p>
                      </a-popover>
                      <img
                        v-if="index < 3"
                        src="../../assets/hot-shop.png"
                        alt=""
                      />
                    </div>
                  </template>
                </template>
              </a-table>
            </div>
          </div>
          <div class="hot-brand hot-merchant">
            <div class="right-title">
              <img src="../../assets/hot-merchant.png" alt="" />
              <p>热门店家</p>
            </div>
            <div class="brand-body">
              <a-table
                :columns="hotMerchantColumns"
                :data-source="hotMerchantData"
                :pagination="false"
              >
                <template #bodyCell="{ column, record, index }">
                  <template v-if="column.key === 'name'">
                    <div class="brand-name">
                      <img src="../../assets/radio-not-checked.png" alt="" />
                      <a-popover>
                        <template #content>
                          <p>{{ record.name }}</p>
                        </template>
                        <p>{{ record.name }}</p>
                      </a-popover>
                      <img
                        v-if="index < 3"
                        src="../../assets/hot-shop.png"
                        alt=""
                      />
                    </div>
                  </template>
                </template>
              </a-table>
            </div>
          </div>
        </a-space>
      </a-col>
    </a-row>
  </div>
</template>
<script setup>
import { BellOutlined } from "@ant-design/icons-vue";
import { ref, onMounted, onUnmounted } from "vue";
import echartsBar from "../../components/echartsBar.vue";
import {
  dailyDataStatistics,
  getOrderCount,
  getVisitorData,
  getTurnoverInfo,
  getUserCountData,
  getVipCountData,
  getHotSalesInfo,
} from "@/api/index";
import dayjs from "dayjs";
// 获取顶部数据
const dailyData = ref({
  dnuDataDto: {},
  gmvDataDto: {},
  shrDataDto: {},
  uvDataDto: {},
  volDataDto: {},
});
const getDailyDataStatistics = async () => {
  const data = await dailyDataStatistics();
  if (data.code == 200) {
    dailyData.value = data.data;
  }
};
// 交易走势
const getOrderCountChart = async (num) => {
  const data = await getOrderCount();
  if (data.code == 200) {
    getTransactionData(data.data, num);
  }
};
// 访客走势
const getVisitorDataChart = async (num) => {
  const data = await getVisitorData();
  if (data.code == 200) {
    getTransactionData(data.data, num);
  }
};
// 获取交易类目
const getTurnoverInfoData = async (date) => {
  const data = await getTurnoverInfo({ month: date });
  if (data.code == 200) {
    console.log(data.data);
  }
};
// 获取月份
const dealDate = ref(null);
function handleChangeDeal(date, dateString) {
  dealDate.value = date;
  getTurnoverInfoData(dateString);
}
const disabledDate = (current) => {
  // Can not select days before today and today
  return current && current > dayjs().endOf("day");
};
const userPicker = ref(null);
const handleChangeUserDate = (date, dateString) => {
  userPicker.value = date;
  getUserCountDataList(dateString);
};
const vipPicker = ref(null);
const handleChangeVipDate = (date, dateString) => {
  vipPicker.value = date;
  getVipCountDataList(dateString);
};
const hotPicker = ref(null);
const onHotPickerChange = (date, dateString) => {
  hotPicker.value = date;
  getHotSalesInfoList(dateString);
};
// 新增用户
const userCount = ref({
  shopUserData: {},
  userData: {},
});
const getUserCountDataList = async (date) => {
  const data = await getUserCountData({ month: date });
  if (data.code === 200) {
    userCount.value = data.data;
  }
};
// 新增会员
const vipData = ref({});
const getVipCountDataList = async (date) => {
  const data = await getVipCountData({ month: date });
  if (data.code === 200) {
    vipData.value = data.data;
  }
};
// 热销商品
const hotSalesInfo = ref([]);
const getHotSalesInfoList = (date) => {
  getHotSalesInfo({ month: date }).then((res) => {
    if (res.code === 200) {
      hotSalesInfo.value = res.data;
    }
  });
};

const serviceColumns = [
  {
    title: "排名",
    dataIndex: "key",
    key: "key",
    width: "30px",
  },
  {
    title: "商品名称",
    dataIndex: "name",
    key: "name",
    width: "130px",
  },
  {
    title: "售后数",
    dataIndex: "num",
    key: "num",
    width: "50px",
  },
  {
    title: "售后率",
    key: "rate",
    dataIndex: "rate",
    width: "50px",
  },
];
const hotProductColumns = [
  {
    title: "排名",
    dataIndex: "index",
    key: "index",
    width: "70px",
    customRender: (record, index) => `${index + 1} `,
  },
  {
    title: "商品名称",
    dataIndex: "name",
    key: "name",
    width: "400px",
  },
  {
    title: "类目",
    dataIndex: "rootType",
    key: "rootType",
    ellipsis: true,
  },
  {
    title: "子类目",
    key: "childType",
    dataIndex: "childType",
    ellipsis: true,
  },
  {
    title: "交易均价",
    key: "avg",
    dataIndex: "avg",
  },
  {
    title: "交易数",
    key: "num",
    dataIndex: "num",
  },
  {
    title: "月占比",
    key: "rate",
    dataIndex: "rate",
  },
];
const hotBrandColumns = [
  {
    title: "品牌名称",
    dataIndex: "name",
    key: "name",
    width: "100px",
  },
  {
    title: "交易数",
    dataIndex: "num",
    key: "num",
    width: "52px",
  },
  {
    title: "总占比",
    key: "rate",
    dataIndex: "rate",
    width: "52px",
  },
];
const hotMerchantColumns = [
  {
    title: "商家名称",
    dataIndex: "name",
    key: "name",
    width: "150px",
  },
  {
    title: "关注数",
    dataIndex: "num",
    key: "num",
    width: "52px",
  },
];

//交易走势还是访客走势
const transactionNum = ref("1");
const bindTran = (num) => {
  transactionNum.value = num;
  if (num == 1) {
    getOrderCountChart(num);
  } else {
    getVisitorDataChart(num);
  }
};
const value3 = ref();
const mumber = ref(1234);
const serviceData = ref([]);
const hotProductPagination = ref({
  current: 1,
  total: 0,
  defaultPageSize: 4,
  pageSize: 4,
  showSizeChanger: true,
  showTotal: (total) => `共 ${total} 条`,
  showQuickJumper: true,
});
const hotBrandData = ref([]);
const hotMerchantData = ref([]);

//获取交易数
const transactionRef = ref({});
const getTransactionData = (data, num) => {
  const seriesData = ref([]);
  if (num == 1) {
    seriesData.value = [
      {
        name: "营业金额",
        data: data.map((item) => item.payAmount),
        type: "bar",
      },
      {
        name: "交易数量",
        data: data.map((item) => item.num),
        type: "line",
        color: "#F04864",
      },
    ];
  } else {
    seriesData.value = [
      {
        name: "访客数量",
        data: data.map((item) => item.num),
        type: "line",
      },
    ];
  }
  const options = {
    color: ["#6AB0BB"],
    tooltip: {
      // 鼠标移入的效果
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    grid: {
      left: "34px",
      right: "34px",
      top: 67,
      bottom: "23px",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: data.map((item) => item.date),
    },
    yAxis: {
      type: "value",
    },
    series: seriesData.value,
  };
  transactionRef.value?.initEcharts(options);
};

//获取交易类目数据
const categoryRef = ref();
const getCategoryData = () => {
  const options = {
    tooltip: {
      // 鼠标移入的效果
      trigger: "item",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      show: true,
      type: "plain",
      right: "40px",
      top: "middle",
      width: 50,
      icon: "circle",
      formatter: function (name) {
        // var total = 0;
        // var target;
        // for (var i = 0, l = data.length; i < l; i++) {
        // total += data[i].value;
        // if (data[i].name == name) {
        //     target = data[i].value;
        //     }
        // }
        // var arr = [
        //     '{a|'+name+' :}{b|'+((target/total)*100).toFixed(2)+'%}'
        // ]
        let arr = "{a|" + name + " }{b|" + "30%}" + "{c|￥5201}";
        return arr;
      },
      textStyle: {
        rich: {
          a: {
            fontSize: 16,
            color: "rgba(0,0,0,0.58)",
            align: "left",
            padding: [0, 20, 0, 10],
          },
          b: {
            fontSize: 16,
            align: "right",
            color: "rgba(0,0,0,0.58)",
            padding: [0, 0, 0, 10],
            lineHeight: 25,
          },
          c: {
            fontSize: 16,
            align: "right",
            color: "rgba(0,0,0,0.58)",
            padding: [0, 0, 0, 30],
            lineHeight: 25,
          },
        },
      },
    },
    series: [
      {
        name: "具体数额",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          normal: {
            show: true,
            position: "center",
            color: "#4c4a4a",
            formatter:
              "{total|交易额" +
              "}" +
              "\n\r" +
              "{active|￥" +
              mumber.value +
              "}",
            rich: {
              total: {
                fontFamily: "微软雅黑",
                fontSize: 14,
                color: "rgba(0,0,0,0.45)",
                lineHeight: 30,
              },
              active: {
                fontSize: 24,
                fontFamily: "微软雅黑",
                color: "#454c5c",
              },
            },
          },
          emphasis: {
            //中间文字显示
            show: true,
          },
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        center: ["200px", "50%"],
        data: [
          { value: 1048, name: "腕表" },
          { value: 735, name: "潮服" },
          { value: 580, name: "首饰" },
          { value: 484, name: "潮鞋" },
          { value: 300, name: "奢包" },
        ],
      },
    ],
  };
  categoryRef.value?.initEcharts(options);
};

//获取售后数据列表
const getServiceData = () => {
  serviceData.value = [
    {
      key: "1",
      name: "John Brown",
      num: 32,
      rate: "23%",
    },
    {
      key: "2",
      name: "John Brown",
      num: 32,
      rate: "23%",
    },
    {
      key: "3",
      name: "John Brown",
      num: 32,
      rate: "23%",
    },
    {
      key: "4",
      name: "John Brown",
      num: 32,
      rate: "23%",
    },
  ];
};
//获取热销品牌
const getHotBrandData = () => {
  hotBrandData.value = [
    {
      name: "爱马仕多多",
      num: 30,
      rate: "23%",
    },
    {
      name: "爱马仕",
      num: 31,
      rate: "23%",
    },
    {
      name: "爱马仕",
      num: 32,
      rate: "23%",
    },
    {
      name: "爱马仕",
      num: 33,
      rate: "23%",
    },
    {
      name: "爱马仕",
      num: 32,
      rate: "23%",
    },
    {
      name: "爱马仕",
      num: 32,
      rate: "23%",
    },
    {
      name: "爱马仕",
      num: 32,
      rate: "23%",
    },
    {
      name: "爱马仕",
      num: 32,
      rate: "23%",
    },
  ];
};
//获取热门店家
const getHotMerchantData = () => {
  hotMerchantData.value = [
    {
      name: "爱马仕多多多多啊大叔大婶",
      num: 30,
      rate: "23%",
    },
    {
      name: "爱马仕",
      num: 31,
      rate: "23%",
    },
    {
      name: "爱马仕",
      num: 32,
      rate: "23%",
    },
    {
      name: "爱马仕",
      num: 33,
      rate: "23%",
    },
    {
      name: "爱马仕",
      num: 32,
      rate: "23%",
    },
    {
      name: "爱马仕",
      num: 32,
      rate: "23%",
    },
    {
      name: "爱马仕",
      num: 32,
      rate: "23%",
    },
    {
      name: "爱马仕",
      num: 32,
      rate: "23%",
    },
  ];
};
const getDateTime = () => {
  const fullYear = dayjs().format("YYYY-MM-DD");
  const week = dayjs().format("dddd");
  const nowTime = dayjs().format("HH:mm:ss");
  return fullYear + " " + week + " " + nowTime;
};
const refreshTimer = ref(null);
function startRefresh() {
  // 每隔五分钟调用fetchData方法
  refreshTimer.value = setInterval(() => {
    init()
  }, 5 * 60 * 1000); // 5分钟转换为毫秒
}
const init = () => {
  getDateTime()
  getDailyDataStatistics();
  getOrderCountChart(1);
  getTurnoverInfoData(dayjs().format("YYYY-MM"));
  getUserCountDataList(dayjs().format("YYYY-MM"));
  getVipCountDataList(dayjs().format("YYYY-MM"));
  getHotSalesInfoList(dayjs().format("YYYY-MM"));
}
onMounted(() => {
  init()
  getCategoryData();
  getServiceData();
  getHotBrandData();
  getHotMerchantData();
});
onUnmounted(() => {
  clearInterval(refreshTimer.value);
});
</script>
<style lang="less" scoped>
p {
  margin: 0;
}

:deep(.ant-table-thead > tr > th) {
  background-color: white !important;
  color: rgba(0, 0, 0, 0.45);
  padding: 10px !important;
  text-align: center;
  border: none !important;
}

:deep(.ant-table-tbody > tr > td) {
  padding: 10px !important;
  text-align: center;
  border: none !important;
}

:deep(.tran-category .ant-table-tbody > tr > td:nth-child(1)) {
  display: flex;
  justify-content: center;
}

:deep(.hot-body .ant-table-tbody > tr > td:nth-child(1)) {
  display: flex;
  justify-content: center;
}

:deep(.hot-body .ant-table-thead > tr > th) {
  padding: 13px !important;
}

:deep(.hot-body .ant-table-tbody > tr > td) {
  padding: 13px !important;
}

.growth-pro {
  font-weight: 400;
  height: 26px;
  font-size: 12px;
  color: #777777;
  display: flex;
  align-items: center;

  span {
    font-weight: 600;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.85);
    margin: 0 2px 0 5px;
  }

  img:nth-of-type(1) {
    margin-right: 22px;
  }
}

.card-title {
  font-weight: 400;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.45);
}

.card-number {
  font-weight: 600;
  font-size: 22px;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 8px;
}

.real-time {
  height: 68px;
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;

  .time-left {
    display: flex;
    align-items: center;

    p {
      margin-left: 4px;
      font-weight: 600;
      font-size: 16px;
      color: #2b3453;
    }

    img {
      width: 20px;
      height: 20px;
    }
  }

  > p {
    line-height: 68px;
    font-weight: 400;
    font-size: 14px;
    color: #9599a5;
  }
}

.index-card {
  display: flex;
  align-items: center;
  gap: 18px;

  .per-customer {
    border-top: 1px solid #e8e8e8;
    padding: 7px 0;
    margin-top: 7px;
    font-size: 12px;
    color: #777777;
    height: 32px;

    span {
      color: #313131;
      margin-left: 7px;
    }
  }

  .card-one {
    height: 160px;
    flex: 1;
    background-color: white;
    border-radius: 9px 9px 9px 9px;
    padding: 16px 12px;

    > img {
      height: 26px;
    }

    .growth-pro-border {
      border-top: 1px solid #e8e8e8;
      padding: 7px 0;
      margin-top: 7px;
      height: 32px;
    }
  }
}

.transaction {
  height: 339px;
  background: #ffffff;
  border-radius: 9px 9px 9px 9px;

  .tran-header {
    height: 60px;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;

    padding: 0 34px;

    div {
      display: flex;

      p {
        width: 70px;
        height: 59px;
        line-height: 59px;
        text-align: center;
        font-weight: 800;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.65);
        margin-right: 26px;
        cursor: pointer;
      }

      .change-tran {
        color: #1890ff;
        border-bottom: 2px solid #1890ff;
      }
    }

    > p {
      font-weight: 400;
      font-size: 16px;
      line-height: 60px;
      color: rgba(0, 0, 0, 0.65);
    }
  }
}

.after-sale,
.tran-category {
  display: flex;
  align-items: center;
  gap: 20px;

  .sale-item {
    height: 210px;
    flex: 1;
    background-color: white;
    border-radius: 9px 9px 9px 9px;

    .sale-header {
      height: 60px;
      border-bottom: 1px solid #e8e8e8;
      padding: 13px 19px;
      display: flex;
      justify-content: space-between;

      div {
        display: flex;
        align-items: center;
      }

      p {
        margin-left: 4px;
        font-weight: 600;
        font-size: 16px;
        color: #2b3453;
      }

      img {
        width: 20px;
        height: 20px;
      }
    }
  }
}

.tran-category > .sale-item {
  height: 411px;

  .tran-category-body {
    padding: 19px;

    .category-middle {
      display: flex;

      div {
        width: 40%;

        p:nth-of-type(1) {
          font-weight: 400;
          font-size: 16px;
          color: rgba(0, 0, 0, 0.45);
        }

        p:nth-of-type(2) {
          font-weight: 400;
          font-size: 35px;
          color: rgba(0, 0, 0, 0.85);

          span:nth-of-type(1) {
            font-weight: 400;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.65);
            margin-left: 9px;
          }

          span:nth-of-type(2) {
            font-weight: 400;
            font-size: 16px;
            color: #ff5151;
          }
        }
      }
    }
  }
}

.after-sale .sale-body {
  padding: 0 19px;
  display: flex;
  gap: 40px;

  div {
    flex: 1;

    .card-title {
      margin: 14px 0 9px 0;
    }

    .card-number {
      font-weight: 400;
      font-size: 28px;
      margin-bottom: 5px;
    }

    .growth-pro {
      font-size: 16px;

      img {
        width: 6px;
        height: 12px;
      }

      img:nth-of-type(2) {
        width: 10px;
        height: 14px;
      }
    }
  }
}

.table-key {
  width: 24px;
  height: 24px;
  background: #314659;
  color: white;
  border-radius: 50%;
  text-align: center;
}

:deep(.ant-table-tbody > tr:last-child > td:nth-child(1) > p) {
  background-color: #f0f2f5;
  color: rgba(0, 0, 0, 0.65);
}

.hot-product {
  height: 389px;
  background: #ffffff;
  border-radius: 9px 9px 9px 9px;
  .hot-header {
    height: 65px;
    border-bottom: 1px solid #e8e8e8;
    padding: 16px 19px;
    display: flex;
    justify-content: space-between;

    div {
      display: flex;
      align-items: center;
    }

    p {
      margin-left: 4px;
      font-weight: 600;
      font-size: 16px;
      color: #2b3453;
    }

    img {
      width: 20px;
      height: 20px;
    }
  }
  .hot-body {
    padding: 0 19px;
  }
}

.right-title {
  height: 56px;
  border-bottom: 1px solid #e8ecf0;
  display: flex;
  align-items: center;
  img {
    width: 23px;
    height: 23px;
    margin-right: 5px;
  }
  p {
    font-weight: 500;
    font-size: 16px;
    color: #2b3453;
  }
}

.commission {
  height: 202px;
  background: #ffffff;
  border-radius: 9px 9px 9px 9px;
  padding: 0 19px;
  .commission-body {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    div {
      width: 33%;
      height: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      p:nth-of-type(1) {
        font-weight: 600;
        font-size: 19px;
        color: #262e47;
      }
      p:nth-of-type(2) {
        font-weight: 400;
        font-size: 14px;
        color: #262e47;
      }
    }
  }
}

.hot-brand {
  height: 430px;
  background: #ffffff;
  border-radius: 9px 9px 9px 9px;
  padding: 0 19px;
  :deep(.ant-table-thead > tr > th) {
    font-size: 12px;
  }
  :deep(.brand-body .ant-table-tbody > tr > td) {
    padding: 9px 2px !important;
    font-size: 13px !important;
  }
  .brand-name {
    display: flex;
    justify-content: flex-start !important;
    align-items: center;
    img:nth-of-type(1) {
      width: 23px;
      height: 23px;
    }
    img:nth-of-type(2) {
      width: 19px;
      height: 19px;
    }
    p {
      margin: 0 5px;
      // background-color: rebeccapurple;
      max-width: 48px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.hot-merchant {
  p {
    max-width: 100px !important;
    text-align: left;
  }
}
</style>
